<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="item in breadCrumbList" :key="item.path" :to="{ path: item.path }">
        {{ item.meta.title }}
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>
<script>
import Vue from 'vue'
import { Component } from 'vue-property-decorator'

@Component({
  components: {
  },
  computed: {
    breadCrumbList() {
      let matche = this.$route.matched;
      return matche
    }
  },
})
export default class BreadCrumb extends Vue {
}
</script>
<style lang="scss" scoped>
.el-breadcrumb {
  background-color: $--color-nav;
  margin: 5px;
  height: $page-breadcrumb-height;
  line-height: $page-breadcrumb-height;
  padding: 0 15px;

  .el-breadcrumb__item {
    ::v-deep .el-breadcrumb__inner {
      color: #fff;
    }
  }
}
</style>